<template lang="html">
  <div class="header-container" :class="{'fiexdMenu':menuShow}">
    <div class="header">
      <img class="logo" src="logo" alt="">
      <ul class="nav">
        <li><router-link to="/index">主页</router-link></li>
        <li><router-link to="/doexercise">刷题</router-link></li>
        <li><router-link to="/learncenter">学习中心</router-link></li>
        <li><router-link to="/learndata">学习资料</router-link></li>
        <div class="search">
          <input type="text" name="search" placeholder="请输入你要查询的课程">
          <button type="button" name="button">搜索</button>
        </div>
        <div class="login">
          <template>
            <div class="unlogin" v-if="!getLogin">
              <span ><a href="#" @click="dialogVisible = true">登陆|注册</a></span>
              <Dialogs v-if="dialogVisible" @shade="shadeHandler" @regInfo="regInfoHandler" @loginInfo="loginHandler" />
            </div>
            <div class="logined" v-else>
              <p>下载</p>
              <p>消息</p>
              <p>购物车</p>
              <button type="button" name="button" @click="logout">推出</button>
              <img src="" alt="">
            </div>
          </template>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>

import Dialogs from "./Dialogs"

export default {
  name:"headers",
  data(){
    return{
      menuShow:true,
      dialogVisible:false,
      isLogin:false
    }
  },
  components:{
    Dialogs
  },
  created(){
    this.isLogin = this.$store.getters.getIsLoginAll;
  },
  mounted(){
    // window.addEventListener('scroll', this.handleScroll);
  },
  computed:{
    getLogin(){
      return this.$store.getters.getIsLoginAll;
    }
  },
  methods:{
    // handleScroll () {
    //   let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    //   var offsetTop = document.querySelector('.container').offsetTop;
    //   if(scrollTop >500){
    //     this.menuShow = true;
    //   }else{
    //     this.menuShow = false;
    //   }
    // }
    shadeHandler(data){
      this.dialogVisible = data;
    },
    // 登陆
    loginHandler(data){
      this.$store.dispatch("loginSys",true)
    },
    // 注册
    regInfoHandler(data){
      let url = this.HOST+"/jeeplus/a/sys/register/registerUser";
      this.$axios.post(url,{

      })
      .then(res => {

      })
    },
    logout(){
      this.$store.dispatch("loginSys",false)
      this.dialogVisible = false;
    }
  }
}
</script>

<style  scoped lang="less">

@g_width:1200px;
@g_height:50px;
@g_fontSize:16px;
@g_bg:#fff;

.header-container{
  width: 100%;
  background: @g_bg;
  .header{
    width: @g_width;
    height: @g_height;
    margin: 0 auto;
    text-align: center;
    line-height: 50px;
    .logo{
      float: left;
    }
    .nav{
      overflow: hidden;
      clear: both;
      li{
        float:left;
        font-size: @g_fontSize;
        margin: 0 30px;
      }
      .search{
        float: left;
      }
      .login{
        float: right;
        span{
          font-size: 16px;
        }
        p{
          float: left;
        }
      }
    }
  }
}

.fiexdMenu{
  position: fixed;
  z-index: 100;
}

.active{
  color: #000;
  display: block;
  border-bottom: 1px solid #000;
}


</style>
